<p>
  <button type="button" class="btn btn-primary btn-sm"
          (click)="group.isOpen = !group.isOpen">Toggle last panel
  </button>
  <button type="button" class="btn btn-primary btn-sm"
          (click)="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel
  </button>
</p>

<div class="checkbox">
  <label>
    <input type="checkbox" [(ngModel)]="oneAtATime">
    Open only one at a time
  </label>
</div>

<accordion [closeOthers]="oneAtATime">
  <accordion-group heading="Static Header, initially expanded"
                   [isOpen]="status.isFirstOpen"
                   [isDisabled]="status.isFirstDisabled">
    This content is straight in the template.
  </accordion-group>
  <accordion-group *ngFor="let group of groups" [heading]="group.title">
     {{ group?.content }}
  </accordion-group>
  <accordion-group heading="Dynamic Body Content">
    <p>The body of the accordion group grows to fit the contents</p>
    <button type="button" class="btn btn-primary btn-sm" (click)="addItem()">Add Item</button>
    <div *ngFor="let item of items">{{item}}</div>
  </accordion-group>
  <accordion-group #group [isOpen]="status.open">
    <div accordion-heading>
      I can have markup, too!
      <i class="pull-right glyphicon"
         [ngClass]="{'glyphicon-chevron-down': group?.isOpen, 'glyphicon-chevron-right': !group?.isOpen}"></i>
    </div>
    This is just some content to illustrate fancy headings.
  </accordion-group>
</accordion>
